<template>
  <PrintBox
    :printRow="printList"
    :isVertical="false"
    :isPageSize="false"
    id="printBoxStatus"
  >
    <template slot="title" slot-scope="scope">
      <div style="margin-bottom: 40px">
        设备停用/报废/恢复使用审批表 STET/B/20-3
      </div>
    </template>
    <template slot-scope="scope">
      <!-- 表格  class  table-page  必须-->
      <table
        style="border-collapse: collapse; table-layout: fixed; width: 90%"
        border="1"
        cellspacing="0"
        class="table-page"
        :isVertical="false"
      >
        <tr class="table_header" style="height: 20mm">
          <td colspan="2" style="width: 40mm">设备名称</td>
          <td colspan="4" style="width: 80mm">{{ scope.item.deviceName }}</td>
          <td colspan="2" style="width: 40mm">规格型号</td>
          <td colspan="3" style="width: 80mm">
            {{ scope.item.spec }}
          </td>
        </tr>
        <tr class="table_header" style="height: 20mm">
          <td colspan="2">出厂编号</td>
          <td colspan="4">{{ scope.item.code }}</td>
          <td colspan="2">设备编号</td>
          <td colspan="3">
            {{ scope.item.deviceCode }}
          </td>
        </tr>
        <tr style="height: 20mm">
          <td colspan="2">申请内容</td>
          <td colspan="9">
            <div style="display: flex; align-items: center">
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="scope.item.statusType == 1"
                />停用
              </div>
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="scope.item.statusType == 2"
                />报废
              </div>
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="scope.item.statusType == 3"
                />恢复使用
              </div>
            </div>
          </td>
        </tr>
        <tr style="height: 20mm">
          <td colspan="2">恢复使用前检定/校准日期</td>
          <td colspan="9">{{ scope.item.checkDate }}</td>
        </tr>
        <tr>
          <td colspan="2">申请理由</td>

          <td colspan="9" style="height: 60mm">
            <div>
              <div
                v-for="item in scope.item.contentList"
                style="display: flex; align-items: center"
              >
                <input type="checkbox" :checked="item.isSelected == 0" />{{
                  item.contentLabel
                }}
              </div>
            </div>
            <div style="display: flex; align-items: center; margin-top: 20mm">
              <div style="display: flex; align-items: center; width: 40mm">
                申请部门：{{ scope.item.deptName }}
              </div>
              <div style="width: 60mm; position: relative">
                申请人：
                <img
                  style="width: 80px; position: absolute; top: -10px"
                  :src="$VUE_APP_IMG_API + scope.item.esign"
                />
                <!-- {{ scope.item.createByName }} -->
              </div>
              <div style="display: flex; align-items: center; width: 50mm">
                日期：{{ parseTime(scope.item.createTime, "{y}-{m}-{d}") }}
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 20mm;
              "
            >
              <div style="width: 60mm; position: relative">
                检测部门负责人：<template
                  v-if="CheckApprove(scope, 'jcbmfzr').ShowImg"
                >
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'jcbmfzr').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "jcbmfzr").endTime }}
              </div>
              <div style="width: 10mm"></div>
            </div>
          </td>
        </tr>

        <tr>
          <td colspan="2">设备管理员</td>

          <td colspan="9" style="height: 70mm">
            <div
              style="
                display: flex;
                align-items: center;
                margin-top: 100px;
                position: relative;
              "
            >
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'sbgly').type == 1"
                />情况属实
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 30mm;
                  margin-left: 15mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="
                    checkHistoryNodeComment(scope, 'sbgly').type == 2 ||
                    checkHistoryNodeComment(scope, 'sbgly').type == 3
                  "
                />情况不符
              </div>
              <div style="position: absolute; text-align: left; top: 20px">
                <template v-if="CheckApprove(scope, 'sbgly').ShowMessage">
                  {{ CheckApprove(scope, "sbgly").MessageText }}
                </template>
              </div>
            </div>

            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 100px;
              "
            >
              <div style="width: 60mm; position: relative">
                签字：<template v-if="CheckApprove(scope, 'sbgly').ShowImg">
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'sbgly').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "sbgly").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">质量负责人</td>

          <td colspan="9" style="height: 70mm">
            <div
              style="
                display: flex;
                align-items: center;
                margin-top: 100px;
                position: relative;
              "
            >
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'zlfzr').type == 1"
                />同意
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 20mm;
                  margin-left: 15mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="
                    checkHistoryNodeComment(scope, 'zlfzr').type == 2 ||
                    checkHistoryNodeComment(scope, 'zlfzr').type == 3
                  "
                />不同意
              </div>
              <div style="position: absolute; text-align: left; top: 20px">
                <template v-if="CheckApprove(scope, 'zlfzr').ShowMessage">
                  {{ CheckApprove(scope, "zlfzr").MessageText }}
                </template>
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 100px;
              "
            >
              <div style="width: 60mm; position: relative">
                签字：<template v-if="CheckApprove(scope, 'zlfzr').ShowImg">
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'zlfzr').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "zlfzr").endTime }}
              </div>
            </div>
          </td>
        </tr>
      </table>
      <!-- 底部信息位置 -->
      <div class="page-bottom" style="page-break-after: always">
        <div class="desc">注：本表格自2021年6月1日起生效</div>
      </div>
    </template>
  </PrintBox>
</template>
<script>
import printStyle from "@/utils/print.js";
import { deviceStatusInfo } from "@/api/device/deviceStatus.js";

export default {
  data() {
    return {
      printList: [],
      formData: {},
    };
  },
  methods: {
    getinfo(id) {
      return deviceStatusInfo(id).then((response) => {
        this.formData = response.data;
      });
    },

    async printBox(e) {
      await this.getinfo(e);
      //infos  勾选的数据 如果有勾选就打印勾选。
      this.printList = [this.formData];
      setTimeout(() => {
        document.title = "设备停用/报废/恢复使用审批表 STET/B/20-3";
        this.$print({
          printable: "printBoxStatus", //打印区域id
          type: "html", //打印类型是html
          scanStyles: false,
          targetStyles: ["*"],
          style: this.workStyle(),
          onPrintDialogClose: () => {
            document.title = process.env.VUE_APP_TITLE;
          },
        });
      }, 500);
    },
    workStyle() {
      return `${printStyle}
        table,
        table tr th,
        table tr td {
          padding: 4px;
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
    },
  },
};
</script>
